【Day 17】jQuery事件中的Mouse Events 鼠標事件

2021 iThome 鐵人賽

DAY 17

自我挑戰組

轉職軟體工程師的543系列第 17 篇

13th鐵人賽

bonnieli1414

2021-09-17 00:10:56

3573 瀏覽

分享至

7.Mouse Events 鼠標事件
click() 當滑鼠停在元素上方，按下並鬆開滑鼠左鍵（不包含右鍵），就會發生一次 click 事件。
dblclick() 在很短的時間內發生兩次click，即是一次double click 事件。
hover() 是mouseenter()和mouseleave() 方法的組合。

</style>

<div></div>
<span>Double click the block</span>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, qui ullam nostrum molestiae mollitia consectetur blanditiis voluptatem obcaecati odit consequuntur deserunt amet fugit? Omnis doloribus eligendi fugit nemo nisi rem.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia culpa commodi saepe voluptate, sunt nesciunt veritatis nisi maiores illum quod cum dolores modi dicta error repellendus dolore reiciendis adipisci iure.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Deleniti voluptatibus quae voluptatum! Unde enim, rem dicta accusantium ut, blanditiis id debitis, quas temporibus molestiae explicabo veniam aliquid itaque beatae quaerat.</p>
<ul>
    <li>Milk</li>
    <li>Bread</li>
    <li class="fade">Chips</li>
    <li class="fade">Socks</li>
</ul>

<script>
    $(document).ready(function () {
        $("p").click(function () { 
            $( this ).slideUp();                
        });
    });

    $(document).ready(function () {
        var divdbl = $( "div" ).first();
        divdbl.dblclick(function() {
            divdbl.toggleClass( "dbl" );
        });
    });

    $(document).ready(function () {            
        $( "li" ).hover(
            function() {
                $( this ).append( $( "<span> ***</span>" ) );
            }, function() {
                $( this ).find( "span" ).last().remove();
                }
            );

            $( "li.fade" ).hover(function() {
                $( this ).fadeOut( 100 );
                $( this ).fadeIn( 500 );
            });
        });
        
</script>

mousedown() 當滑鼠移動到元素上方並按下滑鼠（左、右鍵均可）時，就會觸發發生 mousedown 事件。
mouseup() 當放開滑鼠按鍵（左、右鍵均可）時，就會觸發發生 mouseup 事件。
mouseenter() 當滑鼠移動碰觸到元素，就會觸發發生 mouseenter 事件。
mouseleave() 當滑鼠離開元素，就會觸發發生 mouseleave 事件。
mouseover() 當滑鼠經過元素或子元素，就會觸發發生 mouseover 事件。
mouseout() 當滑鼠離開元素或子元素，就會觸發發生 mouseout 事件。
若在同一個元素上按下並鬆開滑鼠左鍵，會依次觸發mousedown、mouseup、click，前一個事件執行完畢才會執行下一個事件。
若在同一個元素上按下並鬆開滑鼠右鍵，會依次觸發mousedown、mouseup，前一個事件執行完畢才會執行下一個事件，不會觸發click事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="js/jquery-3.5.1.min.js"></script>
    <style>
        div.out {
          width: 30%;
          height: 120px;
          margin: 0 15px;
          background-color: #d6edfc;
          float: left;
        }
        div.in {
          width: 50%;
          height: 60%;
          background-color: #fc0;
          margin: 10px auto;
        }
        p {
          line-height: 1em;
          margin: 0;
          padding: 0;
        }
    </style>
        
    <div class="out overout">
    <p>move your mouse</p>
    <div class="in overout"><p>move your mouse</p><p>0</p></div>
    <p>0</p>
    </div>
       
    <div class="out enterleave">
    <p>move your mouse</p>
    <div class="in enterleave"><p>move your mouse</p><p>0</p></div>
    <p>0</p>
    </div>
       
    <script>
    var i = 0;
    $( "div.overout" )
    .mouseover(function() {
        $( "p", this ).first().text( "mouse over" );
        $( "p", this ).last().text( ++i );
    })
    .mouseout(function() {
        $( "p", this ).first().text( "mouse out" );
    });
       
    var n = 0;
    $( "div.enterleave" )
    .mouseenter(function() {
        $( "p", this ).first().text( "mouse enter" );
        $( "p", this ).last().text( ++n );
    })
    .mouseleave(function() {
        $( "p", this ).first().text( "mouse leave" );
    });
    </script>

    <p>Press mouse and release here.</p>
 
    <script>
    $( "p" )
    .mouseup(function() {
        $( this ).append( "<span style='color:#f00;'>Mouse up.</span>" );
    })
    .mousedown(function() {
        $( this ).append( "<span style='color:#00f;'>Mouse down.</span>" );
    });
    </script>    
    
</body>
</html>